<template>
  <section class="shanty-town-build">
    <DivShell title="棚屋改造区建设情况">
      <div class="container">
        <div class="chart">
          <CircleProgress
            :key="reFresh"
            id="legalCircle"
            :width="60*desgin1pxToCilent"
            :radius="4*desgin1pxToCilent"
            :progress="100*(reBuildData.aoiStatist.buildFinish/reBuildData.staticData.buildingTotal)"
            :delay="200"
            :duration="1000"
            barColor="#4AEBE2"
            backgroundColor="#307FFF"
            :isRound="true"
            :isAnimation="true"
            timeFunction="cubic-bezier(0.99, 0.01, 0.22, 0.94)"
          />
          <div class="bg"></div>
        </div>
        <div class="content">
          <p>
            <label>已完成</label>
            <span>
              <span>{{reBuildData.aoiStatist.buildFinish}}</span>
              <em>{{Math.round(100*(reBuildData.aoiStatist.buildFinish/reBuildData.staticData.buildingTotal))}}%</em>
            </span>
          </p>
          <p>
            <label>改造中</label>
            <span>
              <span>{{reBuildData.aoiStatist.buildIng}}</span>
              <em>{{Math.round(100*(reBuildData.aoiStatist.buildIng/reBuildData.staticData.buildingTotal))}}%</em>
            </span>
          </p>
          <p>
            <label>待改造</label>
            <span>
              <span>{{reBuildData.aoiStatist.buildNoFinish}}</span>
              <em>{{Math.round(100*(reBuildData.aoiStatist.buildNoFinish/reBuildData.staticData.buildingTotal))}}%</em>
            </span>
          </p>
        </div>
      </div>
    </DivShell>
  </section>
</template>

<script>
import { mapGetters } from 'vuex'
import DivShell from '@src/components/divShell.vue'
import CircleProgress from '@src/components/circle-progress.vue'
export default {
  name: "ShantyTownBuild",
  components:{
    DivShell,
    CircleProgress
  },
  props: {
    title:{
      type: String,
      default:'丰图精准决策数字底板'
    }
  },
  data() {
    return {
      reFresh:1,
    };
  },
  computed: {
    ...mapGetters(['reBuildData']),
  },
  watch:{
    reBuildData: {
      handler(cval, oval) {
        ++this.reFresh
      },
      deep: true
    }
  },
  mounted() {
     
  },
  methods: {
    
  },
  beforeDestroy() {
      
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
  .shanty-town-build{
    margin-bottom: 18px;
    & .container{
      display: flex;
      & .chart{
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        width: 145px;
        margin-left: -20px;
        &>.bg{
          position: absolute;
          top: 0;
          right: 0;
          left: 0;
          bottom:0;
          margin: auto;
          width: 38px;
          height: 38px;
          border-radius: 50%;
          border:3px solid rgb(33,51,101);
          background: url('../../../assets/img/shanty-town-area.png') center center no-repeat;
          background-size: 22px 22px;
        }
      }
      & .content{
        flex:1;
        &>p{
          display: flex;
          // justify-content: space-between;
          height: 34px;
          line-height: 34px;
          padding-left:18px;
          box-sizing: border-box;
          position: relative;
          &::before{
            content: '';
            position: absolute;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #307FFF;
            top: 50%;
            left: 0;
            margin-top: -3px;
          }
          & label{
            font-size: 14px;
            color: #707DA4;
            width: 110px;
          }
          &>span{
            flex: 1;
            font-size: 16px;
            color: #9CA7C7;
            display: flex;
            justify-content: space-between;
          }
          & em{
            font-size: 16px;
            color: #307FFF;
          }
          &:nth-of-type(1) em{
            color: #4AEBE2;
          }
        }
      }
    }
  }
</style>
